<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            margin: auto;
            width: 1080px;
            border: 10px solid rgb(255, 255, 255);
            border-radius: 80px 0 80px 0;
            padding: 5px;
            background-color: #dbd9d9;
            box-shadow: 10px 10px 20px 10px grey;
        }
        .box2 {
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px;
        }
        .box2 h3 {
            color: rgb(52, 49, 49);
        }
        .box2 a {
            color: rgb(78, 77, 77);
            text-decoration: none;
        }
        .box3 {
            display: flex;
            flex-wrap: wrap;
            padding: 20px;
            margin: 0;
            list-style: none
        }
        .box3 li {
            width: 180px;
            margin-bottom: 20px;
            margin-left: 20px;
            background-color: #fff;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }
        .box3 li img {
            width: 100%;
            height: 120px;
        }
        .li-bottom {
            padding: 10px;
        }
        .li-bottom h5 {
            margin: 0 0 8px 0;
            font-size: 14px;
            color: #333;
        }
        .info {
            font-size: 12px;
            color: #999;
        }
        .info span:first-child {
            color: #ff672b;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box2">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a >
        </div>
        <ul class="box3">
            <script>
                let data = [
                    {
                        src:'./images/course01.png',
                        title: 'Think PHP 5.0 博客系统实战项目演练',
                        num: 1125
                    },
                    {
                        src: './images/course02.png',
                        title: 'Android 网络动态图片加载实战',
                        num: 357
                    },
                    {
                        src: './images/course03.png',
                        title: 'Angular2 大前端商城实战项目演练',
                        num: 22250
                    },
                    {
                        src: './images/course04.png',
                        title: 'Android APP 实战项目演练',
                        num: 389
                    },
                    {
                        src: './images/course05.png',
                        title: 'UGUI 源码深度分析案例',
                        num: 124
                    },
                    {
                        src: './images/course06.png',
                        title: 'Kami2首页界面切换效果实战演练',
                        num: 432
                    },
                    {
                        src: './images/course07.png',
                        title: 'UNITY 从入门到精通实战案例',
                        num: 888
                    },
                    {
                        src: './images/course08.png',
                        title: 'Cocos 深度学习你不会错过的实战',
                        num: 590
                    },
                ]
                for (let i = 0; i < data.length; i++) {
                    document.write(`
                  <li>
                    <img src="${data[i].src}" alt="">
                    <div class="li-bottom">
                    <h5>${data[i].title}</h5>
                     <div class="info">
                   <span>高级·${data[i].num}</span><span>人在学习</span>
                      </div>
                </div>
                  </li>
        `)
                }


            </script>
        </ul>
    </div>

</body>

</html>